<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">发布文章</block>
		</cu-custom>

		<view class="padding-lr ">
			<view class=" flex justify-between padding-top-sm">
				<u-button size="mini">取消</u-button>
				<u-button type="warning" size="mini" @click="addArticle">发布</u-button>
			</view>
			<u-form :model="article" ref="uForm">
				<view v-if="!full">
					<u-form-item label="标题"><u-input v-model="article.title" /></u-form-item>
					<u-form-item label="简介"><u-input v-model="article.description" /></u-form-item>
					<u-form-item label="作者"><u-input v-model="article.author" /></u-form-item>
					<u-form-item label="类型">
						<u-radio-group v-model="article.type">
							<u-radio v-for="(item, index) in typeList" :key="index" :name="item.value">{{ item.name }}</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="封面"><u-upload :action="uploadUrl" max-count="1" @on-success="uploadSuccess" :file-list="fileList"></u-upload></u-form-item>
				</view>
				<view @click="full = !full" class="padding-top-sm padding-right-sm cuIcon-full text-orange flex justify-end"></view>
				<myeditor class="editor" :html="article.contentFormat"  @save="saveEditor" :imageUploader="uploadImg" :muiltImage="true"></myeditor>
			</u-form>
		</view>
	</view>
</template>

<script>
import myeditor from '@/components/plugins/robin-editor/editor.vue';
export default {
	components: { myeditor },
	data() {
		return {
			uploadUrl: 'http://jy520.fun:8082/file/upload',
			article: {
				author: 'Lang',
				type: 1,
				contentFormat:undefined
			},
			typeList: [
				{
					value: 1,
					name: '技术文章'
				},
				{
					value: 2,
					name: '随笔小说'
				},
				{
					value: 3,
					name: '诗词歌赋'
				}
			],
			fileList: [],
			full: false
		};
	},
	methods: {
		uploadSuccess(data, index, lists, name) {
			this.$u.toast('上传成功');
			this.article.cover = data.data.img;
		},
		uploadImg(img, callback) {
			wx.uploadFile({
				url: 'http://jy520.fun:8082/file/upload',
				filePath: img,
				header: {
					'Content-Type': 'multipart/form-data',
					accept: 'application/json'
				},
				formData: {
					method: 'POST' //请求方式
				},
				name: 'file',
				success: function(res) {
					this.$u.toast('上传成功');
					let result = JSON.parse(res.data);
					callback(result.data.img)
				}
			});
		},
		saveEditor: function(e) {
			this.$u.toast('已保存');
			this.article.contentFormat = e.html;
		},
		addArticle(){
			if(!this.article.contentFormat){
				this.$u.toast('请先保存文章内容再发布');
				return;
			}
			this.$u.api.addArticle(this.article).then(res => {
				this.$u.toast('发布成功');
				uni.navigateBack();
			});
		}
	}
};
</script>

<style lang="stylus">
page
	background #Fff
</style>
